<template>
  <div class="f-g f-c" style="height: 100%">
    <div class="header">
      <div class="title">{{ title}}单位</div>
    </div>
    <SearchForm
      :search-list="searchList"
      :search-params="searchParams"
      @search="onSearch"
      @reset="onReset"
    />
    <div class="table-box" style="height: calc(100% - 140px)">
      <el-table
        ref="multipleTable2"
        v-loading="loading"
        height="100%"
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="selection" width="55px" label="序号" align="center" />
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
        <el-table-column label="参会人员">
          <template slot-scope="scope">
            <el-tag
              v-for="(user,index) in scope.row.expert"
              :key="index"
              style="margin-right: 5px;margin-bottom: 5px"
              type="primary"
              closable
              :disable-transitions="false"
              @close="onDeleteUser(user, index)"
            >{{ user.realName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-button type="primary" @click="onAddUser(scope.row)">添加人员</el-button></template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;padding-top: 20px">
      <el-button type="primary" @click="onPre">上一步</el-button>
      <el-button type="primary" @click="onNext">下一步</el-button>
    </div>
    <el-dialog
      title="添加人员"
      :visible.sync="dialogValue2"
      width="500px"
      append-to-body
    >
      <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @close="dialogValue2 = false"
        @save="onSaveUser"
      />
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
export default {
  name: 'Index',
  mixins: [crud],
  props: {
    projectId: String,
      title: {
          type: String,
          default: '选择'
      }
  },
  data() {
    return {
      searchList: [
        {
          key: 'departName',
          name: 'input',
          label: '单位名称'
        }
      ],
      searchParams: {
        departName: ''
      },
      columns: [
          { prop: 'departName', label: '单位名称' },
          { prop: 'leaderPerson', label: '单位负责人' },
      ],
      tableData: [

      ],
      dialogValue2: false,
      deptList: [],
      currentDetail: {},
      ruleForm: {
        realName: '',
        mobile: ''
      },
      rules: {
        realName: [{ required: true, message: '不能为空' }],
        mobile: [{ required: true, message: '不能为空' }]
      },
      formList: [
        {
          key: 'realName',
          name: 'input',
          label: '用户名',
          colSpan: 12
        },
        {
          key: 'mobile',
          name: 'input',
          label: '手机号',
          colSpan: 12
        }
      ],
        loadingNext: false
    }
  },
    created() {
        this.open()
    },
    methods: {
    onDeleteUser(row, index) {
        http.meeting_process.delDeptUser({
            projectId: this.projectId,
            departId: this.currentDetail.id,
            mobile: row.mobile
        }).then(res => {
          console.log(row);
          this.currentDetail.expert.splice(index, 1)
            // row.expert.splice(index, 1)
        })
    },
    onAddUser(row) {
      this.currentDetail = row
      this.dialogValue2 = true
    },
    onSaveUser() {
        http.meeting_process.validateDeptUser({
            ...this.ruleForm,
            projectId: this.projectId,
            departId: this.currentDetail.id
        }).then(res => {
            this.currentDetail.expert.push({
                ...this.ruleForm
            })
            this.ruleForm = {
              realName: '',
              mobile: ''
            }
            this.dialogValue2 = false
        })
    },
    open(deptList) {
      this.deptList = deptList
      if (!this.request) {
        this.request = {
          page: http.meeting_process.deptList
        }
      }
      this.onReset()
      this.dialogValue = true
    },
    initData() {
      if (!this.projectId || !this.request) return
        this.loading = true
      this.request.page({
        id: this.projectId,
          ...this.searchParams
      }).then(res => {
        this.tableData = res.data.records
        this.$nextTick(() => {
          this.tableData.forEach(row => {
            if (row.status === 1) {
              this.$refs.multipleTable2.toggleRowSelection(row, true)
            }
          })
            this.$refs.multipleTable2.doLayout()
            this.loading = false
        })
      })
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onNext() {
        this.loadingNext = true
      http.meeting_process.deptListSave({
          projectId: this.projectId,
          departList: this.selectOptions
      }).then(res => {
        this.dialogValue = false
          this.loadingNext = false
          this.$emit('next')
      }).catch(() => {
          this.loadingNext = false
      })
    },
    onPre() {
      this.dialogValue = false
      this.$emit('pre')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
